<template>
  <div>
    <el-row style="height:400px">
      <el-col :span="8" class="incomeFooterItem"
        ><div>
          <h4 class="incomeFooterH4">热门线路</h4>
          <div class="incomeFooterSize">排名线路车票数量</div>
          <div
            class="incomeFooterList"
            v-for="(item, index) in selectPopularLines"
            :key="index"
          >
            <span class="incomeFooterListIndex" :class="{'incomeFooterListIndexSelect': index < 3}">{{ index + 1 }}</span>
            <span class="selectPopularLinesItem">{{ item.qczmc }}</span>
            <div class="selectPopularLinesImgDiv selectPopularLinesItem">
              <img
                class="selectPopularLinesImg"
                src="../../image/right.png"
                alt=""
              />
            </div>
            <span>{{ item.terminus }}</span>
            <span class="selectPopularLinesZS">{{ item.ZS }}</span>
          </div>
        </div></el-col
      >
      <el-col :span="8" class="incomeFooterItem"
        ><div>
          <h4 class="incomeFooterH4">热门出发地</h4>
          <div class="incomeFooterSize">排名城市车票数量</div>
          <p
            class="incomeFooterList incomeFooterList2"
            v-for="(e, index) in selectPopularStartingStation"
            :key="index"
          >
            <span class="incomeFooterListIndex" :class="{'incomeFooterListIndexSelect': index < 3}">{{ index + 1 }}</span>
            <span class="incomeFooterPadding">{{ e.qczmc }}</span>
            <span class="selectPopularLinesZS selectPopularLinesZSP">{{ e.ZS }}</span>
          </p>
        </div></el-col
      >
      <el-col :span="8" class="incomeFooterItem">
        <h4 class="incomeFooterH4">热门抵达地</h4>
        <div class="incomeFooterSize">排名城市车票数量</div>
        <p
          class="incomeFooterList incomeFooterList2"
          v-for="(item, index) in selectPopularDestinations"
          :key="index"
        >
          <span class="incomeFooterListIndex" :class="{'incomeFooterListIndexSelect': index < 3}">{{ index + 1 }}</span>
          <span class="incomeFooterPadding">{{ item.terminus }}</span>
          <span class="selectPopularLinesZS selectPopularLinesZSP">{{ item.ZS }}</span>
        </p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  watch: {
    selectPopularLines(a, b) {
      this.selectPopularLines = a;
    },
    selectPopularStartingStation(a, b) {
      this.selectPopularStartingStation = a;
    },
    selectPopularDestinations(a, b) {
      this.selectPopularDestinations = a;
    },
  },
  props: [
    "selectPopularLines",
    "selectPopularStartingStation",
    "selectPopularDestinations",
  ],
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.incomeFooterItem {
  padding-left: 50px;
  color: rgba(0, 0, 0, 0.647);
  font-size: 15px;
}
.incomeFooterSize {
  margin-bottom: 5px;
}
.incomeFooterList2{
    margin-top: 16px;
}
.incomeFooterH4 {
  color: black;
  font-size: 15px;
}
.incomeFooterList {
  line-height: 30px;
}
.incomeFooterListIndex {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: #F0F2F5;
  border-radius: 50%;
  margin-right: 20px;
  text-align: center;
}
.incomeFooterListIndexSelect{
    color: rgb(255, 255, 255);
    background-color: #314659;
}
.selectPopularLinesItem{
    margin-right: 15px;
}
.selectPopularLinesZS{
    display: inline-block;
    width: 150px;
    text-align: right;
    float: right;
    padding-right: 170px;
    padding-top: 15px;
}
.selectPopularLinesZSP{
    padding-top: 0px;
    
}
.incomeFooterPadding{
    padding-right: 150px;
}
.selectPopularLinesIcon {
  font-weight: bold;
}
.selectPopularLinesImgDiv {
  width: 35px;
  height: 35px;
  display: inline-block;
  position: relative;
  top: 13px;
}
.selectPopularLinesImg {
  max-width: 100%;
  max-height: 100%;
}
</style>